<template>
	<div class="beg">
		<div class="toFcenters" v-for="(item, index) in arr" :key="index" @click="goClassify(item.path)">
			<div class="top">
				<img :src="item.img" alt="">
			</div>
		
			<div class="bottom">
				<div class="top1">
					<img :src="item.img1" alt="" class="img1">
					<span>{{ item.text  }}</span>
					<img :src="item.img2" alt="" class="img2">
					<span class="span2">{{ item.text1 }}</span>
				</div>
				<p class="span">{{ item.text2 }}</p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() { 
		return {
			arr: [
				// { img: "https://gw.alicdn.com/imgextra/i4/791541891/O1CN0155pPfm1Pq7dUHzX5H_!!791541891-0-beehive-scenes.jpg_360x10000Q75.jpg_.webp", img1: "https://gw.alicdn.com/imgextra/i4/791541891/O1CN01wNYN6j1Pq7ZCWQh6D_!!791541891-2-beehive-scenes.png_110x10000.jpg_.webp", text: "云南西南国旅", img2: "https://gw.alicdn.com/tfs/TB1l_0.b3gP7K4jSZFqXXamhVXa-45-45.png_110x10000.jpg_.webp", text1: "183", text2:"西双版纳的泼水节，可是热门非常的"},
				// { img: "https://gw.alicdn.com/imgextra/i2/2206704160845/O1CN01rFtXVJ1I73PqvdsGO_!!2206704160845-0-beehive-scenes.jpg_360x10000Q75.jpg_.webp", img1: "https://gw.alicdn.com/imgextra/i2/2206704160845/O1CN01rFtXVJ1I73PqvdsGO_!!2206704160845-0-beehive-scenes.jpg_360x10000Q75.jpg_.webp", text: "寻梦环游记", img2: "https://gw.alicdn.com/tfs/TB1l_0.b3gP7K4jSZFqXXamhVXa-45-45.png_110x10000.jpg_.webp", text1: "3"},
				// { img: "https://gw.alicdn.com/imgextra/i2/897239801/O1CN01gVRJDX2MGuKjd5TOJ_!!897239801-0-beehive-scenes.jpg_360x10000Q75.jpg_.webp", img1: "https://gw.alicdn.com/imgextra/i2/897239801/TB2mwe.d4naK1RjSZFtXXbC2VXa_!!897239801-0-beehive-scenes.jpg_110x10000Q75.jpg_.webp", text: "小来带你看世界", img2: "https://gw.alicdn.com/tfs/TB1l_0.b3gP7K4jSZFqXXamhVXa-45-45.png_110x10000.jpg_.webp", text1: "1.4万"},
				// { img: "https://gw.alicdn.com/imgextra/i4/2208548272346/O1CN01sZYpft1TCVrW56ALL_!!2208548272346-0-tmap.jpg_360x10000Q75.jpg_.webp", img1: "https://gw.alicdn.com/imgextra/i1/2208548272346/O1CN01i8clGS1TCVpq9h5bB_!!2208548272346-0-beehive-scenes.jpg_110x10000Q75.jpg_.webp", text: "仙仙de阿璐", img2: "https://gw.alicdn.com/tfs/TB1l_0.b3gP7K4jSZFqXXamhVXa-45-45.png_110x10000.jpg_.webp", text1: "82.4万", text2:"带小孩住这样的酒店，嗨翻了！"},
			]
		}
	},
	async created() {
		this.$http({
			url: ' http://localhost:3000/syfzcen',
			method: "get"
		}).then(res => {
			this.arr = res.data

		})
	 },
	methods: {
		goClassify(path) {
			this.$router.push(`${path}`)
		}
	}
}
</script>

<style scoped>
.beg{
	background-color: rgba(251, 248, 248, 0.853);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 10px;
	box-sizing: border-box;
}
.toFcenters{
	width: 3.46rem;
	height: 6.2rem;
	border-radius: .2rem;
	background-color: white;
}
.top img{
	width: 100%;
	height: 4.64rem;
	border-radius: .2rem;
}
 .top1{
	height: .4rem;
	margin: .15rem;
	margin-top: .3rem;
}
.bottom{
	box-sizing: border-box;
}
.bottom .top1 img{
width: .3rem;
height: .3rem;
margin-left: -0.08rem;
margin-right: .1rem;
}
.bottom .top1 .img2{
	margin-left: 2.4rem;
	margin-top: -0.3rem;
}
.bottom .top1 .span2{
	display: block;
		position: relative;
		left: 2.75rem;
		top: -.55rem;
}
 .span{
	margin-top: -0.2rem;
	margin-left: .05rem;
	font-size: 16px;
	font-weight: 700;
	overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
}
</style>